<template>
  <div>
    <div class="banner1">
      <rd-swipe :swipe="swipe1">
        <div class="rd-swipe-item" :style="{ 'background-image': `url(${img})` }" v-for="(img, index) in imgs" v-bind:item="img" v-bind:index="index" v-bind:key="img.index">
        </div>
      </rd-swipe>
    </div>
    <div class="b2">
      <div class="container clearfix">
        <div class="item">
          <div class="nohover_text">
            <div class="icon1 icon"></div>
            <div class="title">政务咨询/查询</div>
            <div class="intro">最详细的办事流程、最权威的政务数据、最热门的政策解读，乐政智慧平台运用...</div>
          </div>
          <div class="hover_text">
            <div class="hover_text_inner">最详细的办事流程、最权威的政务数据、最热门的政策解读，乐政为企业、个人提供最新、最全、最通俗易懂的政务服务信息。7x24h无间断一对一服务，精准语义分析技术解决方言问题，海量资讯尽在政务数据知识库。</div>
          </div>
        </div>
        <div class="item">
          <div class="nohover_text">
            <div class="icon2 icon"></div>
            <div class="title">在线预约</div>
            <div class="intro">电话可以约，网页可以约，手机 APP还能约！在乐政，随时随地等你来约...</div>
          </div>
          <div class="hover_text">
            <div class="hover_text_inner">电话可以约，网页可以约，手机 APP还能约！在乐政，随时随地等你来约！在线咨询、预约、预审、办理，随时查看排队时间，订单情况及时查询，办理进度实时追踪，乐政通通为您搞定！</div>
          </div>
        </div>
        <div class="item">
          <div class="nohover_text">
            <div class="icon3 icon"></div>
            <div class="title">政务帮办</div>
            <div class="intro">优质的服务团队，专业的办理人员，在家躺着就能下单，办理完成送件上门...</div>
          </div>
          <div class="hover_text">
            <div class="hover_text_inner">优质的服务团队，专业的办理人员，在家躺着就能下单，办理完成送件上门。乐政，让你“足不出户”办理所有政务！启用“首问责任制”，委托事项全流程可追踪，全套服务可溯源可追责。</div>
          </div>
        </div>
        <div class="item">
          <div class="nohover_text">
            <div class="icon4 icon"></div>
            <div class="title">热门咨询</div>
            <div class="intro">一手新鲜资讯，国家大事要闻，政策变革，时事动向，海量新闻快报，热点政务...</div>
          </div>
          <div class="hover_text">
            <div class="hover_text_inner">一手新鲜资讯，国家大事要闻，政策变革，时事动向，海量新闻快报，热点政务解读，尽在乐政新闻。不论大事小情，乐政新闻悉数为您呈上，助您阅尽天下大事。</div>
          </div>
        </div>
        <div class="item">
          <div class="nohover_text">
            <div class="icon5 icon"></div>
            <div class="title">一键发布需求</div>
            <div class="intro">自设快速响应机制，一键发布马上接单，您可以享受到乐政智慧平台一对一贴心...</div>
          </div>
          <div class="hover_text">
            <div class="hover_text_inner">自设快速响应机制，一键发布马上接单，您可以享受到乐政智慧平台一对一贴心服务。全流程帮办导办上门办，为您解决政务的所有困扰。</div>
          </div>
        </div>
        <div class="item">
          <div class="nohover_text">
            <div class="icon6 icon"></div>
            <div class="title">微博、微信同步运营</div>
            <div class="intro">关注乐政官方微博、微信，及时更新、趣味活动，为您的生活平添精彩。自媒体...</div>
          </div>
          <div class="hover_text">
            <div class="hover_text_inner">关注乐政官方微博、微信，及时更新、趣味活动，为您的生活平添精彩。自媒体特有的互动沟通模式，让你尽情的畅所欲言。实时在线人工咨询，打造独属于你生活的口袋管家！</div>
          </div>
        </div>
      </div>
    </div>
    <div class="b3">
      <div class="title"></div>
      <div class="banner2">
        <rd-swipe :swipe="swipe2">
          <div class="rd-swipe-item">
            <div class="item">
              <div class="icon1 icon"></div>
              <div class="title">7x24h免费咨询</div>
              <div class="line"></div>
              <div class="intro">免费政策政务咨询查询，7x24小时全天候解答问题。</div>
            </div>
            <div class="item">
              <div class="icon2 icon"></div>
              <div class="title">实时追踪</div>
              <div class="line"></div>
              <div class="intro">最新进展，一手掌握，订单情况随时查询，办理进度实时追踪。</div>
            </div>
            <div class="item">
              <div class="icon3 icon"></div>
              <div class="title">快速响应</div>
              <div class="line"></div>
              <div class="intro">10分钟快速响应机制，极致业务办理体验，节约您的时间成本。</div>
            </div>
          </div>
          <div class="rd-swipe-item">
            <div class="item">
              <div class="icon4 icon"></div>
              <div class="title">上门服务</div>
              <div class="line"></div>
              <div class="intro">上门办理政务，让百姓“足不出户”把事办，从群众出发，为百姓办事。</div>
            </div>
            <div class="item">
              <div class="icon5 icon"></div>
              <div class="title">信息安全</div>
              <div class="line"></div>
              <div class="intro">最完善的保密体系，最规范的办理流程，最专业的团队人员。</div>
            </div>
            <div class="item">
              <div class="icon6 icon"></div>
              <div class="title">首问责任制</div>
              <div class="line"></div>
              <div class="intro">启用流程追责体系，规避服务问题，不满意可申请全额退款。</div>
            </div>
          </div>
        </rd-swipe>
      </div>
    </div>
    <div class="b4">
      <div class="container">
        <div class="title"></div>
        <div class="clearfix">
          <template v-for="item in news">
            <div class="item">
              <div class="img">
                <img :src=item.img alt="">
                <router-link :to="item.link">
                  <div class="inner_bg">
                    <div class="ball-beat">
                      <div></div>
                      <div></div>
                      <div></div>
                    </div>
                    <div class="text">查看详情</div>
                  </div>
                </router-link>
              </div>
              <div class="info">
                <router-link :to="item.link">
                  <div class="title fof">{{item.title}}</div>
                </router-link>
                <div class="intro">{{item.intro}}</div>
                <div class="date">{{item.date}}</div>
              </div>
            </div>
          </template>
        </div>
        <div class="more">
          <router-link to="/news">查看更多</router-link>
        </div>
      </div>
    </div>
    <div class="b5 clearfix">
      <img src="../../static/images/title_03-1.png" alt="" class="fl">
      <div class="fl right">
        <div class="title"></div>
        <div class="subtit">—— 智在乐政，乐享政务</div>
        <div class="intro">
          <p>乐政智慧平台是四川智美高科科技有限公司基于“互联网+政务服务”思维模式，运用人工智能及大数据技术，整合优质服务资源而打造的综合类服务平台。</p>
          <p>乐政智慧平台以政务服务为主导，范围覆盖企业及个人的全生命成长周期中所需的政务服务</p>
        </div>
        <div class="more">
          <router-link to="/about">查看更多</router-link>
        </div>
      </div>
    </div>
    <div class="map">
      <mymap></mymap>
    </div>
  </div>
</template>

<script>
  import rdSwipe from './common/slide'
  import mymap from './common/map'
  export default {
    data () {
      return {
        swipe1: {
          activeIndex: 0,
          autoplay: 4000
        },
        swipe2: {
          activeIndex: 0,
          autoplay: 4000
        },
        imgs: [
          '../static/images/banner.jpg'
        ],
        infoWindow: {
          show: true
        },
        news: [
          {
            title: '春节临近 成都地铁枢纽站早开站晚收车',
            intro: '【导读】记者从成都地铁获悉，即日起至2月21日，成都地铁2号线往犀浦方向末班车成都东客站发车时间延迟至23: 04，方便铁路到…',
            date: '2017-01-22',
            img: 'http://www.joygov.com/upload/news/4.1.png',
            link: '/news/a/newsAdetail1'
          },
          {
            date: '2017-01-20',
            img: 'http://www.joygov.com/upload/news/3.1.png',
            intro: '↵【导读】1月23日起，成都交警首批推出的多成员车辆专用车道（HOV），将在科华南路、天府大道南一、二段两条道路早晚高峰时段…',
            title: '成都HOV专用车道1月23日正式启动 2月13日起…',
            link: '/news/a/newsAdetail2'
          },
          {
            date: '2017-01-19',
            img: 'http://www.joygov.com/upload/news/1.1.png',
            intro: '【导读】今年，成都市和四川省省本级作为人社部、人民银行明确的第三代具有金融功能的社保卡第一批先行启动建设的地区，将启动…',
            title: '成都社保卡2年内全部免费更换 新卡还有银行卡…',
            link: '/news/a/newsAdetail3'
          }
        ]
      }
    },
    components: {
      rdSwipe,
      mymap
    }
  }
</script>


<style scoped>
#allmap {
  height: 500px;
}

.title {
  font-size: 20px;
}

.banner1 {
  width: 100%;
  height: 600px;
}

.b2 {
  z-index: 10;
  position: relative;
  top: -90px;
  margin: 0 auto -90px;
  width: 1220px;
  height: 300px;
  background: url(../../static/images/bj.png) no-repeat;
}

.b2>.container {
  padding-top: 10px;
  height: 250px;
}

.b2 .item {
  position: relative;
  float: left;
  width: 200px;
  height: 250px;
  overflow: hidden;
}

.b2 .item .title {
  font-size: 16px;
  color: #333;
  text-align: center;
}

.b2 .item .intro {
  padding: 12px 15px;
  font-size: 14px;
  color: #999;
  text-align: justify;
  line-height: 25px;
}

.b2 .item .icon {
  width: 100%;
  height: 122px;
}

.b2 .item:hover .hover_text {
  transform: translateX(0);
}

.b2 .item:hover .nohover_text {
  transform: translateX(100%);
}

.b2 .item:hover .hover_text_inner {
  opacity: 1;
  transform: translateY(-50%);
}

.b2 .item .nohover_text {
  height: 250px;
  transition: .8s cubic-bezier(.82, 0, .28, .99);
}

.b2 .item .hover_text {
  opacity: 1;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 170px;
  height: 220px;
  padding: 15px;
  background: #fafafa;
  font-size: 14px;
  color: #999;
  text-align: center;
  transform: translateX(-100%);
  transition: .8s cubic-bezier(.82, 0, .28, .99);
}

.hover_text_inner {
  opacity: 0;
  position: absolute;
  top: 50%;
  width: 170px;
  height: auto;
  transform: translateY(-50%);
  line-height: 25px;
  color: #999;
  transition: .5s .5s;
}

.b2 .item .icon1 {
  background: url(../../static/images/1-1_01.png) no-repeat center;
  background-position-y: 32px
}

.b2 .item .icon2 {
  background: url(../../static/images/1-1_02.png) no-repeat center;
  background-position-y: 32px
}

.b2 .item .icon3 {
  background: url(../../static/images/1-1_03.png) no-repeat center;
  background-position-y: 32px
}

.b2 .item .icon4 {
  background: url(../../static/images/1-1_04.png) no-repeat center;
  background-position-y: 32px
}

.b2 .item .icon5 {
  background: url(../../static/images/1-1_05.png) no-repeat center;
  background-position-y: 32px
}

.b2 .item .icon6 {
  background: url(../../static/images/1-1_06.png) no-repeat center;
  background-position-y: 32px
}

.b3 {
  margin: 0 auto;
  width: 1200px;
  height: 570px;
}

.b3>.title {
  height: 50px;
  background: url(../../static/images/title_01.png) no-repeat center;
}

.b3 .rd-swipe-pagination {
  bottom: 50px;
}

.banner2 {
  height: 520px;
}

.banner2 .item {
  float: left;
  width: 400px;
  text-align: center;
}

.banner2 .item .icon {
  margin: 50px auto 30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
}

.banner2 .item .icon1 {
  background: url(../../static/images/title_01_icon1.png) no-repeat center;
}

.banner2 .item .icon2 {
  background: url(../../static/images/title_01_icon2.png) no-repeat center;
}

.banner2 .item .icon3 {
  background: url(../../static/images/title_01_icon3.png) no-repeat center;
}

.banner2 .item .icon4 {
  background: url(../../static/images/title_01_icon4.png) no-repeat center;
}

.banner2 .item .icon5 {
  background: url(../../static/images/title_01_icon5.png) no-repeat center;
}

.banner2 .item .icon6 {
  background: url(../../static/images/title_01_icon6.png) no-repeat center;
}


.banner2 .item .title {
  font-size: 22px;
  color: #333;
}

.banner2 .item .line {
  margin: 15px auto;
  width: 30px;
  height: 2px;
  background: #e82822;
}

.banner2 .item .intro {
  padding: 0 40px;
  font-size: 18px;
  color: #999;
  line-height: 30px;
  white-space: initial;
}

.banner2 .rd-swipe-pagination {
  bottom: 40px;
}

.b4 .container>.title {
  margin-bottom: 40px;
  height: 50px;
  background: url(../../static/images/title_02.png) no-repeat center;
}

.b4 {
  padding: 50px 0;
  background: #fafafa;
}

.b4 .container {
  margin: 0 auto;
  width: 1200px;
}

.b4 .item {
  float: left;
  margin-right: 24px;
  width: 382px;
  border: 1px solid #e3e3e3;
  transition: .3s;
}

.b4 .item:hover {
  transform: translateY(-20px);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.1);
}

.b4 .item:nth-last-child(1) {
  margin-right: 0;
}

.b4 .item .img {
  position: relative;
  width: 100%;
  height: 240px;
}

.b4 .item .img img {
  width: 100%;
  min-height: 100%;
  height: auto;
}

.b4 .item .img .inner_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 54px;
  padding: 93px 0;
  opacity: 0;
  color: #fff;
  font-size: 18px;
  text-align: center;
  transition: .4s;
}

.b4 .item .inner_bg:hover {
  opacity: .9;
  background: rgb(217, 46, 36);
}

.b4 .item .inner_bg:hover .ball-beat>div {
  opacity: 1;
  transform: translateY(0)
}

.b4 .item .inner_bg:hover .text {
  opacity: 1;
  transform: translateY(0)
}

.ball-beat {
  margin-bottom: 6px;
}

.ball-beat>div {
  width: 8px;
  height: 8px;
  margin: 2px;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: translateY(-20px);
  transition: .3s .3s;
}

.b4 .item .inner_bg .text {
  opacity: 0;
  transform: translateY(20px);
  transition: .3s .3s;
}

.b4 .item .info {
  position: relative;
  padding: 20px;
  background: #fff;
}

.b4 .item .info::after {
  content: '';
  position: absolute;
  top: -30px;
  right: 15px;
  width: 0;
  height: 0;
  border-color: transparent transparent #fff transparent;
  border-style: solid;
  border-width: 15px 15px 15px 15px;
}

.b4 .item .title {
  margin-bottom: 5px;
  width: 100%;
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.b4 .item .intro {
  font-size: 14px;
  color: #999;
  text-align: left;
  line-height: 25px;
}

.b4 .item .date {
  text-align: right;
  font-size: 14px;
  color: #999;
}

.b4 .more a {
  margin: 30px auto 0;
  display: block;
  width: 90px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #e82822;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #e82822;
  background: #fff;
}

.b5 {
  margin: 0 auto;
  width: 1200px;
  padding: 50px 0;
}

.b5 .right {
  margin-left: 65px;
  width: 555px;
}

.b5 .right .title {
  margin-top: 85px;
  height: 26px;
  background: url(../../static/images/title_03.png) no-repeat center left;
}

.b5 .right .subtit {
  margin: 20px 0;
  font-size: 18px;
  color: #333;
}

.b5 .right .intro {
  font-size: 14px;
  color: #777;
  line-height: 25px;
}

.b5 .right .more a {
  margin-top: 30px;
  display: block;
  width: 85px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #e82822;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  color: #e82822;
  background: #fff;
  float: right;
}

.map {
  height: 500px;
}

.bm-view {
  height: 100%;
}

.iw_poi_title {
  color: #CC5522;
  font-size: 14px;
  font-weight: bold;
  overflow: hidden;
  padding-right: 13px;
  white-space: nowrap
}

.iw_poi_content {
  font: 12px arial, sans-serif;
  overflow: visible;
  padding-top: 4px;
  white-space: -moz-pre-wrap;
  word-wrap: break-word
}
</style>
